<template>
  <div class="content">
    <div class="header">
      <P>MESSAGES/ADVICE</P>
      <P>兼职评价</P>
    </div>
    <div class="card">
      <el-form ref="addRef" :model="form" label-width="80px" style="margin: 10px;">
        <el-form-item label="评价">
          <el-input type="textarea" v-model="form.desc" placeholder="请输入内容" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="addFn()">发布</el-button>
        <el-button type="primary" @click="clearFn()">重置</el-button>
      </div>
    </div>
    <div class="message">
      <el-card class="card">
        <div slot="header" class="clearfix header-box">
          <span>兼职评价</span>
        </div>
        <div class="box" v-for="(item, index) in list.slice((page-1)*pageSize,pageSize*page)" :index="index">
          <div class="top">
          <div class="avatar">
            <img :src="item.avatar" alt="" srcset="" v-if="item.avatar">
            <img src="../../assets/images/avatar.jpg" alt="" srcset="" v-else>
          </div>
          <div class="userinfo">
            <div class="nickname">{{ item.nickname }}</div>
            <div class="post">{{ item.create_time }}</div>
          </div>
        </div>
          <div class="content">{{ item.content }}</div>
        </div>
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :page-size="pageSize" background layout="prev, pager, next" :total="total">
    </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { addMessageAPI, getMessageAPI } from '@/api/message'
export default {
  data() {
    return {
      form: {
        desc: ''
      },
      list: [],
      total: 1,
      pageSize:3,
      page: 1,
    };
  },

  mounted() {

  },

  methods: {
    async addFn() {
      this.$refs.addRef.validate(async valid => {
        if (valid) {
          console.log(this.form);
          const { data: res } = await addMessageAPI(this.form.desc)
          if (res.status !== 0) {
            console.log('发布评论失败!');
          } else {
            console.log('发布评论成功!');
            this.form.desc = ''
            this.initgetMessageFn()
          }
        }
      })
    },
    clearFn() {
      this.form.desc = ''
    },
    async initgetMessageFn() {
      const res = await getMessageAPI()
      if (res.status !== 200) {
        console.log('获取评论失败!');
      } else {
        console.log('获取评论成功!');
        this.list = res.data.data
        this.total = res.data.total
      }
    },
    handleSizeChange(val){
      this.pageSize = 1
      this.pageSize = val
    },
    handleCurrentChange(val){
      this.page = val
    }
  },
  created(){
    this.initgetMessageFn()
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
}

.content {
  width: 65%;
  margin: 20px auto;

  .header {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: burlywood;
    font-weight: 500;
    font-family: 'Courier New', Courier, monospace;
  }

  .card {
    margin-top: 5px;
    width: 100%;
    background-color: rgb(223, 240, 234);
    border-radius: 5px;
  }

  .message {
    width: 100%;
    // background-color: skyblue;

    .card {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin: 5px auto;
      background-color: #fff;
      border-bottom: solid 1px rgb(237, 238, 240);

      .header-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .box {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 5px auto;
        border-bottom: solid 1px rgb(237, 238, 240);

        .top {
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .avatar {
        width: 50px;
        height: 50px;
        border-radius: 90px;
        margin-right: 10px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 90px;
        }
      }

      .userinfo {
        width: calc(100% - 55px);
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.825em;

        .nickname {
          width: 100%;
          height: 50%;
          line-height: 35px;
        }

        .post {
          width: 100%;
          height: 50%;
          color: rgb(116, 118, 128);
        }
      }
    }
        .content {
          width: 100%;
          height: auto;
          margin-bottom: 20px;
          font-size: 15px;
          line-height: 22px;
        }
      }

    }
  }

  .btn {
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .pagination {
    display: flex;
    margin: 10px;
    justify-content: center;
  }
}
</style>